<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>miRCards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'mircards/bootstrap5/css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'mircards/css/style.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'mircards/css/fontawesome-free-5.15.4-web/css/all.min.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'mircards/css/bstreeview.css' %}" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="myLogo">
        <span style="font-size:30px;">人类microRNA信息检索系统</span><br/>
    </div>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#search">Search</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#browse">Browse</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#analysis">Analysis</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#download">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#help">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#about">About</a>
        </li>
    </ul>
    <div class="tab-content" id="tab_content">
        <div class="tab-pane active container" id="home">
            <div class="row" style="margin-top:15px;">
                <div class="col-5" style="margin-left:50px;">
                    <p style="width: 400px;margin-top: 5px;text-align:justify">
                        把摘要放在这里。该平台施基于Web的人类microRNA信息检索系统，整理收录了人类3XXX条miRNA相关信息。包含miRNA前体名称、miRNA成熟体名称、序列信息、所属家族信息等。
                    </p>
                </div>
                <div class="col-4">
                    <p style="width: 400px;margin-top: 5px;text-align:justify">
                        <p>本系统主要有以下功能：</p>
                        <p>浏览功能</p>
                        <p>信息检索功能</p>
                        <p>下载功能</p>
                        <p>友情链接</p>
                    </p>
                </div>
            </div>
        </div>
        <div class="tab-pane container" id="search">
           <div id="fragment-3">
               <div class="container row">
                    <p style="margin:20px 0 0 0; font-size:150%;">通过miRNA前体或成熟体名称进行检索 <span id="example" style="margin-left:20px;color: deepskyblue;cursor: pointer;">Use example</span></p>
                    <div class="col-12" style="margin-top: 20px;">
                        <select id="input1_1" name="input1_1" style="width:150px;font-size: 16px;height: 40px;">
                            <option value="mir" selected="selected">mature miRNA</option>
                            <option value="pre">pre-miRNA</option>
                        </select>
                        <input id="input1_3" type="text" style="font-size: 16px;width: 400px;height: 40px;" >
                        <button class="btn btn-success submit_mir" style="margin-left:20px;">Search</button>
                        <input id="resetsearch" type="reset" class="btn btn_1" style="margin-left:20px;font-size:20px;" value="Reset">
                    </div>
                    <div id="searchresult" style="margin-top:50px;margin-bottom: 100px;">
                        <div id="res_content" style="display: none;">
                            <div class="card border-success mb-3" style="max-width: 80rem;">
                                <div class="card-header border-success">Precursor hsa-let-7a-1</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-2"><h5 class="card-title">Accession</h5></div>
                                        <div class="col-4">MI000000000</div>
                                        <div class="col-2"><h5 class="card-title">Family</h5></div>
                                        <div class="col-3">let-7</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-2"><h5 class="card-title">Description</h5></div>
                                        <div class="col-4"><p class="card-text">Homo sapiens hsa-let-7a-1 precursor miRNA</p></div>
                                        <div class="col-2"><h5 class="card-title">Genome context</h5></div>
                                        <div class="col-3">chr9: 94175957-94176036 [+]</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-2"><h5 class="card-title">Sequence</h5></div>
                                        <div class="col-10"><p class="card-text">ugggaUGAGGUAGUAGGUUGUAUAGUUuuagggucacacccaccacugggagauaaCUAUACAAUCUACUGUCUUUCcua</p></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <div class="card">
                                            <div class="card-header">Mature hsa-let-7a-5p</div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-4"><h6 class="card-title">Accession</h6></div>
                                                    <div class="col-6">MI000000000</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-4"><h6 class="card-title">Sequence</h6></div>
                                                    <div class="col-8">UGAGGUAGUAGGUUGUAUAGUU</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-4"><h6 class="card-title">Genome context</h6></div>
                                                    <div class="col-8">chr9: 94175957-94176036 [+]</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-4"><h6 class="card-title">Predicted targets</h6></div>
                                                    <div class="col-4"><a href="https://www.targetscan.org/cgi-bin/targetscan/vert_71/targetscan.cgi?mirg=hsa-let-7a-5p"><img src="{% static 'mircards/image/targetscanvert_logo.png' %}" class="card-img-top"></a></div>
                                                    <div class="col-4"><a href="https://www.isical.ac.in/~bioinfo_miu/final_html_targetminer/hsa-let-7a-5p"><img src="{% static 'mircards/image/targetminer_logo.png' %}" class="card-img-top"></a></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="card">
                                            <div class="card-header">Mature hsa-let-7a-3p</div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-4"><h6 class="card-title">Accession</h6></div>
                                                        <div class="col-6">MI000000000</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-4"><h6 class="card-title">Sequence</h6></div>
                                                        <div class="col-8">UGAGGUAGUAGGUUGUAUAGUU</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-4"><h6 class="card-title">Genome context</h6></div>
                                                        <div class="col-8">chr9: 94175957-94176036 [+]</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-4"><h6 class="card-title">Predicted targets</h6></div>
                                                        <div class="col-4"><a href="https://www.targetscan.org/cgi-bin/targetscan/vert_71/targetscan.cgi?mirg=hsa-let-7a-5p"><img src="{% static 'mircards/image/targetscanvert_logo.png' %}" class="card-img-top"></a></div>
                                                        <div class="col-4"><a href="https://www.isical.ac.in/~bioinfo_miu/final_html_targetminer/hsa-let-7a-5p"><img src="{% static 'mircards/image/targetminer_logo.png' %}" class="card-img-top"></a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
           </div>
        </div>
        <div class="tab-pane container" id="browse">
            <div class="row">
                <div class="col-3">
                    <div id="tree"></div>
                </div>
                <div class="col-9">2</div>
            </div>
        </div>
        <div class="tab-pane container" id="analysis">
<form action="" method="post" id="Form" target="_blank">
            <div class="container mt-3 ">
                    <table width="90%">
                        <tr>
                            <td class="subtitle" colspan="2"><h5>Select miRNA or precursor as analysis type</h5></td>
                        </tr>
                        <tr>
                            <td class="menu mt-3"><h5><strong> Choose analysis type:</strong></h5></td>
                            <td>
                                <a href="#miRNA" class="btn btn-primary  choices" role="button">miRNAs</a>
	                            <a href="#pre" class="btn btn-outline-secondary  choices" role="button">pre-miRNAs</a>
                            </td>
                        </tr>
                         <div class="container" id="miRNA">
                        <tr style="display:table-row">
                            <td><h5><strong>Input miRNA list:</strong></h5></td>
                            <td>
                                <textarea name="name" id="input_name" cols="20" rows="5" class="form-control mt-3" onfocus="this.value=''; this.onfocus=null;" >
                                    hsa-miR-144-5p
                                    hsa-miR-17-5p
                                    hsa-miR-20a-5p
                                    hsa-miR-222-3p
                                    hsa-miR-106a-5p
                                    hsa-miR-93-5p
                                    hsa-miR-126-3p
                                    hsa-miR-363-3p
                                    hsa-miR-302c-3p
                                </textarea>
                            </td>
                        </tr>
                         </div>
                         <div class="container" id="pre" >
                        <tr style="display:none">
                            <td><h5><strong>Input pre-miRNAs list:</strong></h5></td>
                            <td>
                                <textarea name="name" id="input_name" cols="20" rows="5" class="form-control mt-3"
onfocus="this.value=''; this.onfocus=null;" > </textarea>
                            </td>
                        </tr>
                         </div>
                        <tr>
                            <th><label for="input_file"><h5><strong>Upload  file:</strong>  </h5></label></th>
                            <td><input type="file" id="upload">  <a class="btn border-info my-2 btn-sm" download="hsa_mirnas.txt" onclick="example()" href=" /mircards/static/examples/hsa_mirnas.txt" >Example</a>
                                <!--<a id="example_file_mirna" href="/mircards/static/examples/hsa_mirnas.txt" target="_blank">
                                <strong>Example</strong> </a>
                                --></td>
                        </tr>
                        <tr>
                            <td class="subtitle" colspan="2"><h5>Algorithm of enrichment analysis</h5></td>
                        </tr>
                        <tr>
                            <td><h5><strong>Analysis method:</strong></h5> </td>
                            <td>
                                <ul id="id_input_type" class="list-unstyled">
                                    <li><label for="id_input_type_0"><input type="radio" name="input_type" value="ORA"
                                                                            class="list-unstyled " required=""
                                                                            id="id_input_type_0" checked="">
                                         <strong>Over-Representation Analysis (ORA)</strong>
                                    </label>
                                    </li>
                                    <li><label for="id_input_type_1"><input type="radio" name="input_type"
                                                                            value="GSEA" required="" id="id_input_type_1">
                                        <strong>miRNA enrichment analysis (GSEA)</strong>  </label>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                     <tr>
                            <td class="subtitle" colspan="2"><h5>Input reference miRNA set(optional)</h5></td>
                     </tr>
                      <tr>
                            <td><h5><strong>Reference set:</strong></h5></td>
                          <td><select  class="set_select" name="miRNA_set">
								<option>Function</option>
								<option>Disease</option>
								<option>TF</option>
								<option>Cluster</option>
								<option>Family</option>
								<option>TissueSpecific</option>
								<option>AllSets</option>
                               </select></td>
                      </tr>
                        <tr>
                            <th><label for="input_file"><h5><strong>Upload  file:</strong>  </h5></label></th>
                            <td><input type="file" id="upload"> <a class="btn border-info my-2 btn-sm" download="mirset.txt" onclick="example()" href=" /mircards/static/examples/mirset.txt">Example</a>
                                  </td>

                        </tr>
                            <tr>
                                <td class="subtitle" colspan="2"><h5>Other parameters</h5></td>
                            </tr>
                         <tr class="menu mt-3">
                            <td ><h5><strong>Min size: exclude smaller sets</strong></h5></td>
                            <td>
                            <input type="text" class="para" value="6" name="min_size">
                            </td>
                            </tr>
                        <tr class=" menu mt-3">
                            <td ><h5><strong>Max size: exclude larger sets</strong></h5></td>
                            <td>
                            <input type="text" class="para" value="200" name="max_size">
                            </td>
                            </tr>

                        <tr class=" menu mt-3">
                            <td ><h5><strong>Number of permutations:</strong></h5></td>
                            <td>
                            <input type="text" class="para" value="1000" name="permutations">
                            </td>
                            </tr>
                        </tbody>
                    </table>
                     <br>
                    <button type="submit" onclick="item_run()" class="btn btn-primary end mt-8">Submit</button>
                    <button type="reset" onclick="reset_item()" class="btn btn-basic end mt-8">Reset</button>
            </div>
    </form>
        </div>
        <div class="tab-pane container" id="download">这是网站下载页面</div>
        <div class="tab-pane container" id="help">这是网站帮助页面</div>
        <div class="tab-pane container" id="about">这是网站关于我们页面</div>
    </div>
    <div class="container">
        <div class="row footer">
            <p>School of Life Sciences, Tiangong University
                <br/>
                Address: No.399 Binshui West Road, Xiqing District, Tianjin, China
            </p>
        </div>
    </div>
</div>
<script src="{% static 'mircards/js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'mircards/bootstrap5/js/bootstrap.min.js' %}"></script>
<script src="{% static 'mircards/js/bstreeview.js' %}"></script>
<script src="{% static 'mircards/js/effect.js' %}" type="text/javascript"></script>
<script src="{% static 'mircards/js/main.js' %}" type="text/javascript"></script>
</body>
</html>